<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>条件搜索</span>
        <div class="base-el-float-right">
          <el-button-group>
            <el-button type="primary" icon="el-icon-refresh" @click="resetForm">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="submitForm">搜索</el-button>
          </el-button-group>
        </div>
      </div>
      <el-form ref="ruleForm" :inline="true" :model="formInline">
        <el-form-item label="区域名称:">
          <el-input v-model="formInline.areaName" placeholder="请输入区域名称" />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 区域列表 -->
    <el-card class="base-el-card-bottom">
      <div slot="header" class="clearfix">
        <span>区域列表</span>
        <el-button class="base-el-float-right" type="primary" icon="el-icon-plus" @click="handleEdit">新增</el-button>
      </div>
      <PaginationTable :table-data="tableData" :show-pagination="false">
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column prop="areaName" label="区域名称" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | timeFormatFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否开通">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isEnable ? 'success' : 'danger'">{{ scope.row.isEnable ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="toArea(scope.row)">进入</el-link>
            <el-link type="primary" style="margin: 0 10px" @click="handleEdit(scope.row)">编辑</el-link>
            <router-link class="" :to="'/extension?areaId='+ scope.row._id">
              <el-link type="primary">推广信息</el-link>
            </router-link>
          </template>
        </el-table-column>
      </PaginationTable>

      <el-dialog title="编辑区域" :show-close="false" :visible="dialogVisible">
        <el-form ref="dataForm" :model="dataForm" label-width="100px">
          <el-form-item label="区域名称:" prop="areaName" :rules="[{required: true, trigger:'blur', message:'请输入区域名称'}]">
            <el-input v-model="dataForm.areaName" />
          </el-form-item>
          <el-form-item label="排序:">
            <el-input-number v-model="dataForm.sort" :min="1" :step="1" />
          </el-form-item>
          <el-form-item label="是否开通:">
            <el-switch v-model="dataForm.isEnable" />
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="doEdit">确认</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import PaginationTable from '@/components/PaginationTable'
import { queryByCondition, updateById, insertRecord } from '@/api/commoncrud'
const defaultFormInline = {
  areaName: ''
}
export default {
  name: 'Area',
  components: { PaginationTable },
  data() {
    return {
      formInline: {
        ...defaultFormInline
      },
      tableData: [],
      dataForm: {},
      dialogVisible: false
    }
  },
  async created() {
    await this.fetchData()
    const defaultArea = this.tableData[0]
    const area = window.localStorage.getItem('defaultArea')
    if (!area) {
      window.localStorage.setItem('defaultArea', JSON.stringify(defaultArea))
    }
  },
  methods: {
    async fetchData() {
      const query = { sort: { sort: -1 }}
      Object.keys(this.formInline).forEach(key => {
        if (this.formInline[key]) { query[key] = this.formInline[key] }
      })
      const res = await queryByCondition('area', 0, 1000, query)
      this.tableData = res.data.documentList
    },
    handleEdit(data) {
      if (data) {
        this.dataForm = { ...data }
      } else {
        this.dataForm = {}
      }
      this.dialogVisible = true
    },
    handleClose() {
      this.dataForm = {}
      this.dialogVisible = false
    },
    async doEdit() {
      this.$refs['dataForm'].validate(async validate => {
        if (validate) {
          const data = this.dataForm
          const modelId = data._id
          if (modelId) {
            delete data._id
            await updateById('area', modelId, data)
          } else {
            const res = await insertRecord('area', data)
            await insertRecord('areaextension', { areaId: res.data._id })
          }
          this.dialogVisible = false
          this.$message.success('操作成功!')
          await this.fetchData()
        }
      })
    },
    toArea(area) {
      window.localStorage.setItem('defaultArea', JSON.stringify(area))
      this.$router.push('/category/index')
    },

    async submitForm() {
      await this.fetchData()
    },
    async resetForm() {
      this.formInline = {
        ...defaultFormInline
      }
      await this.fetchData()
    }
  }
}
</script>

<style scoped>

</style>
